layui.define(['jquery'], function(exports) {
	var $ = layui.jquery;
	var c4uindex = {
		addTab: function(id, title, href) {
			var t = layui.$(".layui-tab[lay-filter=c4uworktab]");
			n = t.children(".layui-tab-title");
			s = n.find('>li[lay-id="' + id + '"]');

			if(href.indexOf("http:") != -1 || href.indexOf("https:") != -1 || href.indexOf("url:") != -1) {
				var h = $("#c4u-body").parent().height() - 40;
				href = '<iframe style="height:' + h + 'px;display: block;" src="' + href.replace("url:", "") + '"></iframe>';
			}

			if(s.length == 0) {
				layui.element.tabAdd("c4uworktab", {
					title: title,
					content: href,
					id: id
				});
			}
			layui.element.tabChange("c4uworktab", id);
		},
		uieditor: function(id, title) {

			var editor = '<div class="layui-container boostrap editor">';
			editor += '<div class="layui-row editor-window">';
			editor += '<div class="layui-col-md12 container editor-content ele-row">';
			editor += '<div class="row ele-row "><div class="col-md-12 ele-col "></div></div>';
			editor += '<div class="row ele-row " ><div class="col-md-4 ele-col "></div><div class=" col-md-4 ele-col"></div><div class="col-md-4 ele-col "></div></div>';
			editor += '</div>';
			editor += '</div>';
			editor += '<div class="row editor-preview">';
			editor += '</div>';
			editor += '</div>';

			addTab(id, title, editor);
			loadUIEleme('#eleNavMenu' + id);
			bindEven();
		},
		loadUIEleme: function(elebar) {
			var $elebar = elebar;
			var navEle = [{
					type: 'layout',
					name: '布局设置',
					eles: [{
							name: '12列',
							col: [12]
						},
						{
							name: '6-6列',
							col: [6, 6]
						},
						{
							name: '3x4列',
							col: [3, 3, 3, 3]
						},
						{
							name: '4x3列',
							col: [4, 4, 4]
						},
						{
							name: '4-8列',
							col: [4, 8]
						},
						{
							name: '2-8-2列',
							col: [2, 8, 2]
						}
					]
				},
				{
					type: 'box',
					name: '基本元素',
					eles: [{
							name: '表单',
							ele: '<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>',
							config: [{
								name: '布局',
								icon: 'icon-layou',
								scope: [
									'center',
									'right',
									'left'
								]
							}]
						},
						{
							name: '导航条',
							ele: '<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div>  <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Link <span class="sr-only">(current)</span></a> </li> <li> <a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">Separated link</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li> <a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">Separated link</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>',
							config: []
						},
						{
							name: '标题',
							ele: '<h1>这是一个标题</h1>',
							config: [{
									name: '对齐',
									icon: 'icon'
								},
								{
									name: '等级',
									icon: 'icon'
								}
							]
						},
						{
							name: '段落',
							ele: '<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>',
							config: [{
								name: '对齐',
								icon: 'icon'
							}]
						},
						{
							name: '按钮',
							ele: '<button type="button" class="btn btn-default">按钮</button>',
							config: [{
								name: '类型',
								icon: 'icon'
							}]
						}
					]
				}
			];
			var a = ['<div layui-filter="elebar" class="layui-collapse" lay-accordion>'];
			for(var i = 0; i < navEle.length; i++) {
				// 分组
				var groupEle = navEle[i];
				var groupHtml = '<div class="layui-colla-item">';
				groupHtml += '<h2 class="layui-colla-title">' + groupEle.name + '</h2>';
				groupHtml += '<div class="layui-colla-content layui-show">';
				groupHtml += '<ul class="ele-nav ' + groupEle.type + '">';

				for(var j = 0; j < groupEle.eles.length; j++) {
					var ele = groupEle.eles[j];
					var eleHtml = '';

					eleHtml += '<div class="ele-toolbar">';
					eleHtml += '<div class="ele-drag ele-tool " >';
					eleHtml += '<span class="ele-drag-btn ele-tool layui-btn layui-btn-mini layui-right">拖动</span>';
					eleHtml += '</div>';
					// 配置菜单
					if(ele.config != undefined && ele.config.length > 0) {
						eleHtml += '<div class="ele-tool ele-config btn-group-xs layui-right"  >';
						for(var m = 0; m < ele.config.length; m++) {
							eleHtml += '<span   class="layui-btn layui-btn-mini ">' + ele.config[m].name + '</span>';
						}
						eleHtml += '</div>';
					}

					eleHtml += '<div class="ele-tool ele-config layui-btn-group layui-right" >';
					eleHtml += '<span class="layui-btn layui-btn-mini" onclick="$(this).parent().parent().parent().remove()">删除</span>';
					eleHtml += '</div>';
					eleHtml += '</div>';

					if(groupEle.type == 'layout') {
						eleHtml = '<div class="row ele-row ">' + eleHtml;

						for(var n = 0; n < ele.col.length; n++) {
							eleHtml += '<div class="col-md-' + ele.col[n] + ' ele-col">';
							eleHtml += '</div>';
						}

						eleHtml += '</div>';
					} else if(groupEle.type == 'box') {
						eleHtml = '<div class="ele-box">' + eleHtml;
						eleHtml += '<div class="ele-view-view">';
						eleHtml += ele.ele;
						eleHtml += '</div></div>';
					}

					groupHtml += '<li>';
					groupHtml += '<span class="ele-title">' + ele.name + '</span>';
					groupHtml += '<div class="ele-view boostrap">';
					groupHtml += eleHtml;
					groupHtml += '</div>';
					groupHtml += '</li>';
				}
				groupHtml += '</ul>';
				groupHtml += '</div>';
				groupHtml += '</div>';

				a.push(groupHtml);
			}
			a.push('</div>');
			var rightSide = $('div[ng-controller="c4urightbar"]')
			angular.element(rightSide).scope().load(a.join(""));
			layui.element.init();
		}
	};
	exports('c4uindex', c4uindex);
});